<script setup>
import * as echarts from "echarts";
import { computed, onMounted, watch, ref, toRefs, markRaw } from "vue";
const contariner = ref(null);
// let mychart =ref(null);
let mychart = null;
const props = defineProps({
  width: {
    type: String,
    default: "300px",
  },
  height: {
    typeof: String,
    default: "400px",
  },
  options: {
    type: Object,
    default: null,
  },
  theme:{
    type:Object,
    default:null
  }
});

const { width, options,theme } = toRefs(props);

const style = computed(() => {
  return {
    width: props.width,
    height: props.height,
  };
});
onMounted(() => {
  mychart = echarts.init(contariner.value,props.theme);
  mychart.setOption(props.options);
  // console.log('打印mychart',mychart);
});
// 监视宽度发生变化：
watch(
  width,
  () => {
    setTimeout(() => {
      mychart.resize({ animation: { duration: 300 } });
    });
  },
  { deep: true }
);
// 检测到数据源发生变化：
watch(options, (a) => {
  // console.log('检测到数据源发生变化了');
  mychart.setOption(a)
}, { deep: true });
// 监视主题发生变化：
watch(theme,()=>{
        mychart.dispose();
        mychart = echarts.init(contariner.value,props.theme)
        mychart.setOption(props.options);  
},{deep:true})
</script>

<template>
  <div class="container" ref="contariner" :style="style"></div>
</template>

<style>
</style>
